<template>
  <div class="taskmanage">
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="checked">已完成</van-tabbar-item>
      <van-tabbar-item icon="question">待评价</van-tabbar-item>
      <van-tabbar-item icon="more">待审核</van-tabbar-item>
      <van-tabbar-item icon="clear">已拒绝</van-tabbar-item>
      <van-tabbar-item icon="warning">申诉</van-tabbar-item>
      <van-tabbar-item icon="todo-list">历史记录</van-tabbar-item>
    </van-tabbar>
    <div class="activebox" v-if="isshow">
      <div class="activeone" v-for="item in taskinfo" :key="item.id">
        <p class="titledate">
          <span class="first">
            <van-icon name="clock-o"/>
            <span style="margin-left:5px">{{item.create_time}}</span>
          </span>
          <span class="typestyle"
                :class="{'red':item.task_class == 'pt','green':item.task_class == 'll','blue':item.task_class == 'pj'}">{{item.task_class == 'pt' ? '普通单':(item.task_class=='ll'?'浏览单':'评价单')}}</span>
        </p>
        <p class="picimg" v-if="item.pj_status==1&&item.task_class=='pj'">
          <img :src="item.goods_img" alt="">
          <span @click="to_evaluate(item.baby_id,item.id,item.task_shopname,item.goods_img)"
                style="color: #fff;background:#a0c3fb">开始评价</span>
        </p>
        <p class="picimg" v-else>
          <img :src="item.goods_img" alt="">
          <span @click="onappeal(item)">发起申诉</span>
        </p>
        <div class="bottombox">
          <p v-if="item.task_class == 'pt'">
            <span>淘单号：{{item.task_order}}</span>
            <span style="color:#fb9414;" v-clipboard:copy="item.task_order" v-clipboard:success="onCopy"
                  v-clipboard:error="onError">复制</span>
          </p>
          <p>
            <span>活动编号：{{item.task_id}}</span>
          </p>
          <p v-if="item.task_status == 2">
            <span>审核状态：已拒绝</span>
          </p>
          <p v-else>
            <span>退款状态：{{item.task_refandstatus}}</span>
            <span style="color:#fb9414;" @click="onUpdate(item)">更新状态</span>
          </p>
          <div v-if="item.task_status ==3&&item.task_class=='pj'&&item.pj_status!='2'">
            <span>付款金额：</span>
            <span class="btnmoney" :class="{'blue':item.tx_status == 2 || item.tx_status == 3}"
                  @click="handleMoney(item)">{{item.tx_status == 2 || item.tx_status == 3 ? '已提本金(￥'+item.task_bjmoney+')' : '本金(￥'+item.task_bjmoney+')'}} </span>
            <span class="btnmoney" style="margin-left:20px;background:#04a7f5">未提佣金：￥{{item.task_yjmoney}}</span>
          </div>
          <div v-else-if="item.task_status == 3">
            <span>付款金额：</span>
            <span class="btnmoney" :class="{'blue':item.tx_status == 2 || item.tx_status == 3}"
                  @click="handleMoney(item)">{{item.tx_status == 2 || item.tx_status == 3 ? '已提本金(￥'+item.task_bjmoney+')' : '本金(￥'+item.task_bjmoney+')'}} </span>
            <span class="btnmoney" :class="{'blue':item.tx_status == 3}" @click="onMoney(item)"
                  style="margin-left:10px">{{item.tx_status == 3 ? '已提佣金(￥'+item.task_yjmoney+')' : '佣金(￥'+item.task_yjmoney+')'}}</span>
          </div>
          <div v-else>
            <span>付款金额：￥{{item.task_bjmoney}}</span>
            <span style="margin-left:20px">佣金：￥{{item.task_yjmoney}}</span>
          </div>
          <p v-if="item.task_class == 'pt'||item.task_class == 'pj'">
            <span>交易单号：{{item.task_withdrawno}}</span>
          </p>
          <div v-if="item.task_class == 'pj'" style="display:flex;flex-direction:column;font-size:16px;color:red;font-weight:600;">
            <p>确认收货后,勿私下评价</p>
            <p>等待接受评价任务赚取佣金</p>
          </div>
        </div>
      </div>
      <van-pagination v-model="page" :page-count="total" mode="simple" @change="pageChange"/>
      <van-dialog v-model="vaultDialog" title="提现到金库" show-cancel-button @confirm="onConfirm"
                  @cancel="vaultDialog = false">
        <div class="dialog">
          <img src="../assets/img/money.png" alt="">
          <p style="font-size:26px;line-height: 50px;">￥{{yjmoney}}</p>
          <p style="color: #808080;">佣金提现到金库</p>
        </div>
      </van-dialog>
    </div>
    <div class="nodata" v-else>
      <img src="../assets/img/nodata.png" alt="">
      <span class="textcontent">没有正在执行的活动哦，马上去申请~</span>
      <span class="taskbtn" @click="$router.push('/home')">申请活动</span>
    </div>
    <return></return>
    <AgainReturn></AgainReturn>
    <Footer permsg='1'></Footer>
  </div>
</template>

<script>
  import {tasklist, businesstreasury, updateorderstatus, evaluate_get} from '../api/api';
  import aestool from '@/utils/aestool.js';
  import Footer from '../components/footer.vue'
  import Return from "./Return";
  import AgainReturn from "./AgainReturn";
  export default {
    components: {AgainReturn, Return, Footer},
    data() {
      return {
        active: 0,
        page: 1,
        total: 0,
        taskinfo: [],
        isshow: false,
        vaultDialog: false,
        yjmoney: '',
        taskid: '',
        taskclass: '',
      }
    },
    created() {
      if (this.$route.query.code) {
        sessionStorage.setItem('token', this.$route.query.t)
        if (this.$route.query.code == 1) {
          this.$toast('授权成功,请重新提现！')
        }
      }
      this.gettaskdata()
    },
    methods: {
      to_evaluate(baby_id, id, task_shopname, goods_img) {
        let params = {
          baby_id: aestool.encrypt(baby_id, 'SyncorderzxPjGet'),
          task_id: aestool.encrypt(id, 'SyncorderzxPjGet')
        }
        evaluate_get(params).then(res => {
          if (res.Status == 200) {
            let tempdata = JSON.parse(aestool.decrypt(res.Data, 'SyncorderzxPjGet'))
            console.log('评论数据', tempdata)
            this.data = tempdata
            this.data.imgs = JSON.parse(this.data.imgs)
            this.$router.push({
              path: '/evaluate',
              query: {baby_id: baby_id, id: id}
            })
          } else {
            this.$toast(res.Message)
          }
        })
      },
      onCopy(e) {
        this.$toast('复制成功！')
      },
      onError(e) {
        this.$toast('复制失败！')
      },
      //更新状态
      onUpdate(item) {
        let params = {
          order: aestool.encrypt(item.task_order, 'Syncorderzxcqwe0'),
          shop_name: aestool.encrypt(item.task_shopname, 'Syncorderzxcqwe0')
        }
        updateorderstatus(params).then(res => {
          console.log('更新状态', res)

          if (res.Status == 200) {
            this.$toast(res.Message)
            setTimeout(this.gettaskdata, 1500)
          } else {
            this.$toast(res.Message)
          }
        })
      },
      //佣金提现到金库
      onConfirm() {
        let toastload = this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        });
        let params = {
          task_id: aestool.encrypt(this.taskid, 'Businesstreasury'),
          address: aestool.encrypt(sessionStorage.getItem('ip'), 'Businesstreasury'),
          task_type: aestool.encrypt(this.taskclass, 'Businesstreasury'),
        }
        businesstreasury(params).then(res => {
          toastload.clear()
          console.log('金库', res)
          if (res.Status == 200) {
            this.$toast(res.Message)
            setTimeout(this.gettaskdata(), 1500)
          } else {
            this.$toast(res.Message)
          }
        })
      },
      pageChange(val) {
        this.page = val
        this.gettaskdata()
      },
      gettaskdata() {
        let toastload = this.$toast.loading({
          message: '加载中...',
          forbidClick: true
        });
        let typeval
        if (this.active == 0) {
          typeval = 3
        } else if (this.active == 1) {
          typeval = 8
        } else if (this.active == 2) {
          typeval = 7
        } else if (this.active == 3) {
          typeval = 2
        } else if (this.active == 4) {
          typeval = 5
        } else if (this.active == 5) {
          typeval = 6
        }
        console.log('typeval', typeval)
        let params = {
          promptinfo: aestool.encrypt(typeval, 'tasklist87654321'),
          page: aestool.encrypt(this.page, 'tasklist87654321'),
          page_size: aestool.encrypt(10, 'tasklist87654321'),
        }
        tasklist(params).then(res => {
          toastload.clear()
          // console.log('获取活动列表',res)
          if (res.Status == 200) {
            this.total = Math.ceil(res.Count / 10)
            let temp = JSON.parse(aestool.decrypt(res.Data, 'tasklist87654321'))
            if (temp.length <= 0) {
              this.isshow = false
            } else {
              this.isshow = true
              let ipos
              temp.forEach(item => {
                ipos = item.create_time.indexOf("+")
                item.create_time = item.create_time.replace(/T/g, " ").substring(0, ipos)
              })
              this.taskinfo = temp
              console.log('活动', this.taskinfo)
            }
          } else {
            this.isshow = false
          }
        })
      },
      onappeal(item) {
        this.$router.push({
          name: 'sponsor',
          params: {
            taskId: item.id
          }
        })
      },
      onChange(index) {
        console.log('切换', index)
        this.gettaskdata()
      },
      //本金提现
      handleMoney(item) {
        if (item.tx_status == 2 || item.tx_status == 3) {
          this.$toast('本金已提现！')
        } else {
          this.$router.push({
            name: 'withdrawal',
            params: {
              type: 'BJ',
              task: item
            }
          })
        }
      },
      //佣金提现
      onMoney(item) {
        if (item.tx_status == 1) {
          this.$toast('本金尚未提现！')
        } else if (item.tx_status == 3) {
          this.$toast('佣金已提现！')
        } else {
          this.vaultDialog = true
          this.yjmoney = item.task_yjmoney
          this.taskid = item.id
          this.taskclass = item.task_class
        }
      },
    }
  }
</script>
<style lang="stylus" scoped>
  .taskmanage {
    height 100%

    .van-tabbar--fixed {
      position fixed
      top 0
    }

    .dialog {
      padding 20px 0 30px
      font-size 14px

      img {
        height 100px
      }

      p {
        text-align center
      }
    }

    .nodata {
      padding-top: 80px
      display flex
      flex-direction column
      justify-content center
      align-items center

      img {
        width 70%
      }

      .textcontent {
        font-size 14px
        color #a79478
      }

      .taskbtn {
        width 200px
        color #ffffff
        font-size 14px
        background #64c5ff
        text-align center
        line-height 36px
        margin-top 20px
      }
    }

    .activebox {
      margin-top 50px
      padding 10px
      background #f8f8f8

      .activeone {
        border-radius 5px
        background #ffffff
        margin-bottom 10px

        .titledate {
          font-size 14px
          padding 10px 0
          color #777
          display flex
          justify-content space-between
          align-items center
          border-bottom 1px solid #f8f8f8

          .first {
            margin-left 10px
            display flex
            align-items center
          }

          .typestyle {
            color #fff
            display inline-block
            line-height 24px
            padding 0 10px
            border-top-left-radius 12px
            border-bottom-left-radius 12px
          }
        }

        .picimg {
          display flex
          flex-direction column
          align-items center

          img {
            width 80px
            height 80px
            border-radius 5px
            margin 10px
          }

          span {
            text-align center
            display inline-block
            width 80px
            line-height 30px
            font-size 14px
            border-radius 20px
            background #a0c3fb
            color #3b7dfd
          }
        }
      }

      .green {
        background #00d5c3
      }

      .red {
        background #f54d21
      }

      .blue {
        background #04a7f5
      }

      .bottombox {
        padding 10px
        font-size 14px
        color #636363

        p {
          display flex
          justify-content space-between
          align-items center
          line-height 26px
        }

        div {
          line-height 26px
        }

        .btnmoney {
          background #f6aaa0
          color #ffffff
          padding 5px 10px
          border-radius 5px
        }

        .blue {
          background #bbb
        }
      }
    }
  }
</style>


